<!-- saved from url=(0039)http://39.96.82.121/download/chat2.html -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body>
<div style="background-color: #aab4ba;width: 100%;float: right;">

    <select id="mode" style="height: 24.4px;">
        <option value="one">单行模式</option>
        <option value="multi">多行模式</option>
    </select>

    <button id="clear" style="float: right">清空</button>
    <button id="reconnect" style="float: right;display: none">重新连接</button>
</div>
<div style="height: 95%;width:100%;background-color: black;">
    <div id="console"
         style="    padding-top: 10px;border:none;width:100%;height: 70%;overflow-y: auto;background-color: black;color: white;resize: none">
    </div>
    <div id="resizeBar" style="height: 3px;width: 100%;background-color:  #aab4ba;cursor: row-resize;"></div>
    <textarea id="input"
              style="border:none;width:100%;height:30%;background-color: #eeeeee;;color: #00bb00;resize: none">
</textarea>
</div>
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
<script>

    var consoleArea = $('#console');

    var input = $('#input');

    var resizeBar = $('#resizeBar');

    //开始拖动时的y
    var startY;
    var startCh;
    var startIh;

    var totalH;

    var doc = $(document);

    function start(event) {
        if (event.button === 0) {
            startY = event.pageY;
            startCh=consoleArea.height();
            startIh = input.height();
            totalH = startIh + startCh;

            doc.mousemove(move);
            doc.mouseup(stop);
        }
        return false;
    }

    function move(event) {
        var movepx = (startY - event.pageY);
        var cg = (startCh - movepx) / totalH * 100;
        var ig = (startIh + movepx) / totalH * 100;
        consoleArea.css("height", cg + "%");
        input.css("height", ig + "%");
        return false;
    }

    function stop(envet) {
        doc.unbind('mousemove');
        doc.unbind('mouseup');
    }

    resizeBar.mousedown(start);

    var max = 300;

    var allLines = [];

    $('#clear').click(function () {
        for (var i = 0; i < allLines.length; i++) {
            var line = allLines[i];
            line.remove();
        }
    });

    function inputAndCheck(text, coler) {

        text = text.replace(/[<>&"]/g, function (c) {
            return {'<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;'}[c];
        });

        if (!coler) {
            coler = 'white';
        }

        var lines = text.split('\n');

        var newLines = [];

        for (var i in lines) {
            var t = lines[i];
            var line = $('<pre role="presentation" style="margin:0;color: ' + coler + '"><span role="presentation" style="padding-right: 0.1px;">  <span>' + t + '</span></pre>');
            newLines.push(line);
        }

        //移除之前的行
        if (allLines.length + newLines.length > max) {
            var shouldRemoveNum = allLines.length + newLines.length - max;
            for (var i = 0; i < shouldRemoveNum; i++) {
                var line = allLines[i];
                line.remove();
            }
        }

        var sh = consoleArea.prop("scrollHeight");
        var top = consoleArea.scrollTop();
        var h = consoleArea.height();
        var flag = sh - (top + h) < 50;
        for (var i in newLines) {
            consoleArea.append(newLines[i]);
            allLines.push(newLines[i]);
        }

        if (flag) {
            consoleArea.scrollTop(consoleArea.prop("scrollHeight"));
        }

    }


    var now = null;

    var allHistory = [];

    var historyIndex = 0;

    var maxHistory;

    function pushHistory(t) {

        var len = allHistory.length;
        if (len > maxHistory) {
            maxHistory.splice(0, 1);
        }
        allHistory.push(t);
        historyIndex = allHistory.length;
    }

    function previousHistory() {
        historyIndex--;
        if (historyIndex < 0) {
            historyIndex = 0;
        }
        return allHistory[historyIndex];
    }

    function nextHistory() {
        historyIndex++;
        if (historyIndex > allHistory.length) {
            historyIndex = allHistory.length;
        }
        return allHistory[historyIndex];
    }

    input.keydown(function (e) {

        if (e.key === 'Tab') {
            e.preventDefault();
            var indent = '    ';
            var start = this.selectionStart;
            var end = this.selectionEnd;
            var selected = window.getSelection().toString();
            selected = indent + selected.replace(/\n/g, '\n' + indent);
            this.value = this.value.substring(0, start) + selected
                + this.value.substring(end);
            this.setSelectionRange(start + indent.length, start
                + selected.length);
        }

        else {
            if (e.key === 'Enter') {
                if ($('#mode').val() === 'one' || e.ctrlKey) {
                    e.preventDefault();
                    var v = input.val();
                    input.val('');
                    inputAndCheck(v, 'green');
                    send({type: 'command', body: v});
                    pushHistory(v);
                }
            } else if (e.key === 'ArrowUp') {
                if ($('#mode').val() === 'one' || e.ctrlKey) {

                    e.preventDefault();
                    if (now === null) {
                        now = input.val();
                    }
                    var t = previousHistory();
                    if (t) {
                        input.val(t)
                    }
                }
            } else if (e.key === 'ArrowDown') {
                if ($('#mode').val() === 'one' || e.ctrlKey) {

                    e.preventDefault();
                    if (now === null) {
                        now = input.val();
                    }
                    var t = nextHistory();
                    if (t) {
                        input.val(t);
                    } else {
                        input.val(now);
                        now = null;
                    }

                }
            }
        }
    });
    var sock;

    function openConnect() {

        var url = 'ws://' + window.document.location.host + '/_console';
        sock = new WebSocket(url);
        inputAndCheck('');
        inputAndCheck('正在连接...', 'red');
        sock.onopen = function () {
            $('#reconnect').hide();
            inputAndCheck('连接成功', 'red');
            input.focus();
        };
        sock.onmessage = function (e) {      //处理信息
            inputAndCheck(e.data);
        };
        sock.onclose = function () {
            inputAndCheck('连接已断开', 'red');
            $('#reconnect').show();
            sock = null;
        };
    }

    openConnect();

    $('#reconnect').click(function () {
        if (!sock) {
            openConnect();
        }
    });

    function send(msg) {
        if (sock) {
            sock.send(JSON.stringify(msg));
        } else {
            inputAndCheck('无法发送执行', 'red');
        }
    }


</script>


</body>
</html>